<template>
	<div class="article-box">
		<loadingapp v-if="loading"></loadingapp>
		<ul v-if="article.length" class="article-list">
			<li v-for="list in article">
				<!--缩略图-->
				<a v-link="{path:'/articleDetails?id='+list._id}" class="article-img">
					<img src="/resources/webSite/images/article.jpg">
					<span class="img-mask">阅 读</span>
				</a>
				<div class="article-content">
					<!--标题-->
					<h2 class="article-title">
						<a v-link="{path:'/articleDetails?id='+list._id}">{{list.title}}</a>
					</h2>
					<!--meta-->
					<div class="meta-box">
						<span>
							<i class="iconfont">&#xe602;</i> : {{list.releaseTime | getdate}}
						</span>
						<span>
							<i class="iconfont">&#xe600;</i> : {{list.author}}
						</span>
						<span>
							<i class="iconfont">&#xe601;</i> : 50
						</span>
					</div>
					<p>{{list.briefing}}</p>
				</div>
			</li>
		</ul>
		<h2 v-else class="error-title">这个栏目博主还未发布文章哦!</h2>
		<!--加载更多-->
		<loadingapp v-if="addLoading"></loadingapp>
		<div v-if="btnShow" class="add-btn" @click="addArticle">加载更多</div>
	</div>
</template>
<script>
	var loading = require("../public/loading.vue");
	export default{
		data(){
			return {
				article:[],
				loading:true,
				addLoading:false,
				page:1,
				btnShow:false
			}
		},
		methods:{
			addArticle:function(){
				var th = this;
				th.addLoading = true;
				th.btnShow = false;
				th.$http.post("/getArticle" , {page:th.page} , function(res){
					if(res.state == "ok"){
						th.article = th.article.concat(res.article);
						th.page++;
						th.addLoading = false;
						res.article.length >= 10 && (th.btnShow = true);
					}else{
						alert(res.message);
					};
				},"JSON");
			}
		},
		route:{
			data(transition){
				var th = this;
        this.$http.post("/getArticle" , function(data){
					if(data.article.length >= 10){
						th.btnShow = true;
					};
          transition.next({article:data.article , loading :false});
        },"JSON");
			}
		},
		components:{
			loadingapp:loading
		}
	}
</script>
<style scoped>
	@import url("../../resources/webSite/css/article-list.css");
	.add-btn{
		width:100%;
		height:40px;
		line-height:40px;
		color:#529AC5;
		text-align:center;
		font-size:16px;
		cursor:pointer;
		border:1px solid #529AC5;
		-webkit-transition: all .2s ease-out;
		-moz-transition: all .2s ease-out;
		-ms-transition: all .2s ease-out;
		-o-transition: all .2s ease-out;
		transition: all .2s ease-out;
		margin-bottom:30px;
	}
	.add-btn:hover{
		background:#3298D6;
		border:1px solid #3298D6;
		color:#fff;
	}
	.error-title{
		font-size:22px;
		font-weight:none;
		color:#C1C1C1;
		text-align:center;
	}
</style>
